<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>使用WebGL绘制一个点</title>
    </head>
    <body>
    <!--canvas标签创建一个宽高均为500像素，背景为蓝色的矩形画布-->
    <canvas id="webgl" width="500" height="500" style="background-color: blue"></canvas>
   
   <!-- 顶点着色器源码 -->
    <script id="vertexShader" type="x-shader/x-vertex">
        void main() {
        //给内置变量gl_PointSize赋值像素大小
        gl_PointSize=20.0;
        //顶点位置，位于坐标原点
        gl_Position =vec4(0.0,0.0,0.0,1.0);
    }
  </script>
  <!-- 片元着色器源码 -->
  <script id="fragmentShader" type="x-shader/x-fragment">
        void main() {
        gl_FragColor = vec4(1.0,0.0,0.0,1.0);
        }
  </script>

   <script>

       //通过getElementById()方法获取canvas画布
       var canvas=document.getElementById('webgl');

       //通过方法getContext()获取Canvas 2D绘图上下文
        var c=canvas.getContext('2d');
        c.moveTo(0,0);//直线起点坐标
        c.lineTo(50,50);//直线第2个点坐标
        c.lineTo(0,100);//直线第3个点坐标
        c.stroke();//把点连成直线绘制出来

       //通过方法getContext()获取WebGL上下文
       var gl=canvas.getContext('webgl');
  
        //顶点着色器源码
        var vertexShaderSource = document.getElementById('vertexShader').innerText;
        //片元着色器源码
        var fragShaderSource = document.getElementById('fragmentShader').innerText;
       //初始化着色器
       var program = initShader(gl,vertexShaderSource,fragShaderSource);
      //开始绘制，显示器显示结果
       gl.drawArrays(gl.POINTS,0,1);
   
       //声明初始化着色器函数
       function initShader(gl,vertexShaderSource,fragmentShaderSource){
           //创建顶点着色器对象
           var vertexShader = gl.createShader(gl.VERTEX_SHADER);
           //创建片元着色器对象
           var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
           //引入顶点、片元着色器源代码
           gl.shaderSource(vertexShader,vertexShaderSource);
           gl.shaderSource(fragmentShader,fragmentShaderSource);
           //编译顶点、片元着色器
           gl.compileShader(vertexShader);
           gl.compileShader(fragmentShader);
   
           //创建程序对象program
           var program = gl.createProgram();
           //附着顶点着色器和片元着色器到program
           gl.attachShader(program,vertexShader);
           gl.attachShader(program,fragmentShader);
           //链接program
           gl.linkProgram(program);
           //使用program
           gl.useProgram(program);
           //返回程序program对象
           return program;
       }
   </script>
   </body>
   </html>